<template>
	<view class="artice" v-if="live.cover_img">
		<image :src="live.cover_img" mode="aspectFill" class="bg"></image>
		<view class="content">
			<view class="watch flex_r_between">
				<view class="left flex_center">
					<image src="https://nearby.lefujin.cn/static/nv.png" mode="aspectFill"></image>
					<image src="https://nearby.lefujin.cn/static/nan.png" mode="aspectFill"></image>
				</view>
				<view class="right">
					12个人在线
				</view>
			</view>
			<view class="title hidden">{{ live.name }}</view>
		</view>
		
	</view>

	<view class="loading" v-else>
		<HevuLoading type="loading2" :opacity="0" loadingText="正在努力加载..." text-color="#FD2A53"
			loadingIconColor="#FD2A53" />
	</view>
</template>

<script>
	import HevuLoading from '@/components/hevu-loading/hevu-loading.vue';
	export default {
		components: {
			HevuLoading,
		},
		data() {
			return {
				live: {},

				user: {},
			}
		},
		methods: {

		}
	}
</script>

<style scoped lang="less">
	.artice {
		width: 100%;
		height: 100%;
		border-radius: 24rpx;
		overflow: hidden;
		position: relative;

		.bg {
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 2;
		}
	}

	.content {
		width: 100%;
		height: 100%;
		padding: 24rpx 16rpx;
		position: relative;
		z-index: 3;
		overflow: hidden;
		display: flex;
		flex-direction: column-reverse;

		.title {
			font-weight: 500;
			font-size: 24rpx;
			color: #FFFFFF;
			line-height: 48rpx;
		}

		.watch {
			margin-top: 16rpx;

			.left {
				flex: 1;
				overflow: hidden;
				flex-wrap: nowrap;

				image {
					width: 32rpx;
					height: 32rpx;
					border-radius: 16rpx;
					margin-right: -8rpx;
				}
			}

			.right {
				font-size: 24rpx;
				color: #FFFFFF;
				line-height: 24rpx;
			}
		}
	}
</style>